<template>
  <div>
    <!--模糊查询-->
    <el-form
      :inline="true"
      :model="formInli" status-icon
      :rules="rules" ref="formInline"
      class="demo-form-inline"
      style="text-align: left">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formInli.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getdata()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm('formInli')">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogVisible=true">添加
        </el-button>
      </el-form-item>
    </el-form>

    <!--添加弹出框-->
    <el-dialog
      :visible.sync="dialogVisible"
      title="用户——信息编辑"
      width="30%">
      <span>
        <el-form label-width="80px" :model="formInline">
          <el-form-item label="手机号">
            <el-input v-model="formInline.phone"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="formInline.name"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formInline.text"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm(formInline)">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </span>
    </el-dialog>

    <!--修改弹出框-->
    <el-dialog
      :visible.sync="dialogVisibl"
      title="用户——信息编辑"
      width="550px">
      <!--:before-close="handleClose">-->
      <span>
        <el-form :model="formInlin" :rules="rules" ref="formInline" label-width="80px" class="demo-ruleForm">
          <el-form-item label="账号" prop="rolename">
            <el-input v-model="formInlin.phone" width="88%" readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="formInlin.name"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input width="88%" type="text" v-model="formInlin.text"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="display: inline-block;padding-left: 65%">
          <el-button type="primary" @click="updat(formInlin)">确 定</el-button>
          <el-button @click="dialogVisibl = false">取 消</el-button>
        </span>
      </span>
    </el-dialog>

    <!--修改权限弹出框-->
    <el-dialog
      :visible.sync="dialogVisib"
      title="用户——设置角色"
      width="60%">
      <el-form
        :inline="true"
        :model="adminRol" status-icon
        :rules="rules" ref="formInline"
        class="demo-form-inline"
        style="text-align: left">
        <el-form-item label="角色">
          <el-input v-model="adminRol.rolename" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getdata1(adminRol)" size="mini">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm('adminRol')" size="mini">重置</el-button>
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="updataRole">设置权限
          </el-button>
        </el-form-item>

        <!--角色表格-->
        <el-table
          :data="adminRole"
          ref="multipleTable"
          tooltip-effect="dark"
          border
          style="width: 100%;height: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="id"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="rolename"
            label="名称"
            width="260">
          </el-table-column>
          <el-table-column
            prop="text"
            label="备注"
            width="260">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="251">
          </el-table-column>
          <el-table-column type="selection" width="60">
          </el-table-column>
        </el-table>
      </el-form>

      <!--分页-->
      <div class="block" style="text-align: right; margin-top: 22px;">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="adminRol.current"
          :page-sizes="[2, 4, 20, 50, 100, 200, 500, 1000]"
          :page-size="adminRol.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="adminRol.total">
        </el-pagination>
      </div>
    </el-dialog>

    <!--修改密码弹出框-->
    <el-dialog
      :visible.sync="dialogVisi"
      title="普通用户——密码修改"
      width="550px">
      <!--:before-close="handleClose">-->
      <span>
        <el-form :model="formInlin" :rules="rules" ref="formInline" label-width="80px" class="demo-ruleForm"
                 label-position="right">
          <el-form-item label="旧密码" prop="passworld" style="display: none">
            <el-input v-model="formInlin.passworld" width="80%"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="passworld" label-width="100px">
            <el-input v-model="formInlin.newpassworld1"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="passworld" label-width="100px">
            <el-input v-model="formInlin.newpassworld2" prop="passworld"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="display: inline-block;padding-left: 65%">
          <el-button type="primary" @click="updat(formInlin)">确 定</el-button>
          <el-button @click="dialogVisi = false">取 消</el-button>
        </span>
      </span>
    </el-dialog>

    <!--用户表格-->
    <el-table
      :data="formInline"
      border
      style="width: 100%;height: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="170">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="100">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            @change="open(scope.row)"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="正常"
            inactive-text="禁用">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="text"
        label="备注"
        width="150">
      </el-table-column>

      <el-table-column label="操作" width="390">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.row,1)">修改
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row,2)">设置角色
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.row,3)">密码修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInli.current"
        :page-sizes="[2, 4, 20, 50, 100, 200, 500, 1000]"
        :page-size="formInli.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'

  export default {
    data() {
      return {
        total: 0,
        dialogVisible: false,
        dialogVisibl: false,
        dialogVisib: false,
        dialogVisi: false,
        formInline: {
          id: '',
          name: '',
          phone: '',
          adminRoleId: '',
          sort: '',
          state: '',
          text: '',
          passworld: '',

        },
        formInlin: {
          id: '',
          name: '',
          phone: '',
          adminRoleId: '',
          sort: '',
          state: '',
          text: '',
          passworld: '',
          newpassworld1: '',
          newpassworld2: '',

        },
        formInli: {
          id: '',
          name: '',
          phone: '',
          adminRoleId: '',
          sort: '',
          state: '',
          text: '',
          passworld: '',
          current: 1,
          size: 2,
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          passworld: [
            {required: true, message: '请填写密码', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请选择用户', trigger: 'blur'}
          ]
        },
        adminRole: [],
        adminRol: {
          id: '',
          rolename: '',
          text: '',
          state: '',
          current: 1,
          size: 2,
          total: 0,
        },
        multipleSelection: [],
      }
    }, created() {
      this.getdata();
    },
    methods: {
      // 分页 模糊查询
      getdata() {
        this.$axios.post("usermanage/admin/findAllPage", qs.stringify(this.formInli)).then(r => {
          this.total = r.data.total;
          this.formInline = r.data.records;
          this.current = 1;
        })
      },
      handleSizeChange(val) {
        this.formInli.size = val;
        this.getdata();
      },
      handleCurrentChange(val) {
        this.formInli.current = val;
        this.getdata();
      },

      // 修改状态
      open(row) {
        this.$confirm('确定要修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("usermanage/admin/findrole?id=" + row.id).then(rr => {
            if (rr.data) {
              this.$axios.post("usermanage/admin/upState", qs.stringify(row)).then(r => {
                if (r.data) {
                  this.getdata();
                  this.$message({
                    type: 'success',
                    message: '修改成功!',
                  });
                }
              });
            } else {
              this.$message({
                type: 'error',
                message: '修改失败!',
              }, this.getdata());
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改',
          }, this.getdata());
        });
      },

      // 重置
      resetForm(formName) {
        Object.assign(this.$data.formInli, this.$options.data().formInli);
        Object.assign(this.$data.adminRol, this.$options.data().adminRol);
      },

      // 添加
      add() {
        this.dialogVisible = true;
      },
      submitForm(formInline) {
        this.$axios.post("usermanage/admin/add", qs.stringify(formInline)).then(r => {
          if (r.data) {
            this.getdata();
            this.dialogVisible = false;
            this.$message({
              type: 'success',
              message: '添加成功!',
            });
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!',
            });
          }

        })
      },

      // 电话号码删除
      handleDelete(id) {
        this.formInline.id = id;
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("usermanage/admin/findrole?id=" + id).then(rr => {
              if (rr.data) {
                this.$axios.post("usermanage/admin/delById", qs.stringify(this.formInline)).then(r => {
                  if (r.data) {
                    this.getdata();
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                    });
                  }
                })
              }
              else {
                this.$message({
                  type: 'error',
                  message: '删除失败!',
                }, this.getdata());
              }
            },
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败',
          }, this.getdata());
        });
      },

      // 修改 名称 备注
      handleEdit(row, i) {
        this.formInlin = row;
        if (i === 1) {
          this.dialogVisibl = true;
        }
        if (i === 2) {
          this.formInline.id = row.id;
          this.dialogVisib = true;
          this.getdata1();
        }
        if (i === 3) {
          this.dialogVisi = true;
        }

      },

      // 角色分页 模糊查询
      getdata1() {
        this.$axios.post("usermanage/adminrole/findAllPage", qs.stringify(this.adminRol)).then(r => {
          this.adminRol.total = r.data.total;
          this.adminRole = r.data.records;
          this.adminRol.current = 1;
        })
      },
      handleSizeChange1(val) {
        this.adminRol.size = val;
        this.getdata1();
      },
      handleCurrentChange1(val) {
        this.adminRol.current = val;
        this.getdata1();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        if (this.multipleSelection.length > 1) {
          // 如果多选，取消全选
          this.$alert('只能设置一个权限哦！', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            callback: action => {
              this.$refs.multipleTable.clearSelection();
            }
          });
        }
      },
      // 修改权限
      updataRole() {
        this.$confirm('确定要添加选中的角色?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          let obj = {
            id: this.formInline.id,
            adminroleid: this.multipleSelection[0].id
          };
          this.$axios.post("usermanage/admin/updataRole", qs.stringify(obj)).then(r => {
            if (r.data) {
              this.$message({
                type: 'success',
                message: '设置权限成功!'
              });
              this.dialogVisib = false;
            }
            else {
              this.$message({
                message: '当前的你没有权限设置!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消权限设置'
          });
        });
      },

      //修改角色
      updat(formInlin) {
        alert(formInlin.newpassworld1 === formInlin.newpassworld2);
        if (formInlin.newpassworld1 === formInlin.newpassworld2) {
          formInlin.passworld = formInlin.newpassworld1;
          this.$axios.post("usermanage/admin/updName", qs.stringify(formInlin)).then(r => {
            if (r.data) {
              this.dialogVisibl = false;
              this.getdata();
              this.$message({
                message: '修改角色成功！',
                type: 'success'
              });
            } else {
              this.$message.error('修改失败');
            }
          })
        } else {
          this.$message.error('密码不相同');
        }

      },

      // 判断密码是否相同
      passworld(formInlin) {
        if (formInlin.newpassworld1 === formInlin.newpassworld2) {

        }
      }

    }
  }
</script>

<style scoped>
  * {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
</style>
